<template>
  <div :class="{ 'avue--collapse': isCollapse }" class="avue-contail">

    <div class="avue-header">
      <top />
    </div>

    <div class="avue-layout">
      <div class="avue-left">
        <sidebar />
      </div>
      <div class="avue-main">
        <div id="avue-view" style="height: 100%; overflow-y: auto; overflow-x: hidden">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath" class="avue-view" />
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive" class="avue-view" />
  <!-- <div :class="{ 'avue--collapse': isCollapse }" class="avue-contail">
      <div class="avue-header">
        <top />
      </div>
      <div class="avue-layout">
        <div class="avue-left"  >
          <sidebar   />
        </div>
        <div class="avue-main">
          <div
            id="avue-view"
            style="height: 100%; overflow-y: auto; overflow-x: hidden"
          >
            <keep-alive>
              <router-view
                v-if="$route.meta.keepAlive"
                :key="$route.fullPath"
                class="avue-view"     
              />
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive" class="avue-view" />
          </div>
        </div>
      </div>
      <div class="avue-shade" @click="showCollapse" />
      <global-web-socket v-if="website.websocket" uri="/act/ws/info" />
    </div> -->
  <div id="avue-view" style="height: 100%; overflow-y: auto; overflow-x: hidden">
    <sidebar v-show="false" />
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath" class="avue-view" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" class="avue-view" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import tags from "./tags";
import top from "./top/";
import sidebar from "./sidebar/";
import { checkToken } from "@/api/login";
import { calcScreen } from "@/util";
import GlobalWebSocket from "@/components/WebSocket/GlobalWebSocket";

export default {
  name: "Index",
  provide () {
    return {
      Index: this,
    };
  },
  components: {
    top,
    tags,
    sidebar,
    GlobalWebSocket,
  },
  data () {
    return {
      // 刷新token锁
      refreshLock: false,
      // 刷新token的时间
      refreshTime: "",
      // 计时器
      timer: "",
    };
  },
  computed: mapGetters(["userInfo", "isLock", "isCollapse", "website"]),
  created () {
    // 实时检测刷新token
    this.refreshToken();
  },
  destroyed () {
    clearInterval(this.refreshTime);
    clearInterval(this.timer);
  },
  mounted () {
    this.initWindow();
  },
  methods: {
    showCollapse () {
      this.$store.commit("SET_COLLAPSE");
    },
    openMenu (item = {}) {
      this.$store
        .dispatch("GetMenu", { type: true, id: item.id })
        .then((data) => {
          if (data.length !== 0)
          {
            this.$router.$avueRouter.formatRoutes(data, true);
          }
        });
    },
    // 屏幕检测
    initWindow () {
      this.$store.commit("SET_SCREEN", calcScreen());
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit("SET_SCREEN", calcScreen());
        }, 0);
      };
    },
    // 实时检测刷新token
    refreshToken () {
      this.refreshTime = setInterval(() => {
        checkToken(this.refreshTime, this.refreshLock, this.$store);
      }, 60000);
    },
  },
};
</script>

<style lang="scss">
.avue-layout {
  display: flex;
  width: 100%;
  height: calc(100% - 64px);
}

.avue-left {
  // top: 64px;
  .avue-logo {
    top: 74px;
  }
}

</style>
